<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px" :disabled="viewState == 'view'">
    <el-form-item label="客户名称">
      <el-input v-model="form.clientName" placeholder="请输入客户名称" />
    </el-form-item>
    <el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="法定代表人">
            <el-input v-model="form.legalPerson" placeholder="请输入法定代表人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业负责人">
            <el-input v-model="form.businessOwner" placeholder="请输入企业负责人" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="质量负责人">
      <el-input v-model="form.qualityManager" placeholder="请输入质量负责人" />
    </el-form-item>
    <el-form-item label="是否进口">
      <el-radio-group v-model="form.orImport">
        <el-radio value="1">是</el-radio>
        <el-radio value="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="住所">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-select v-model="form.address" placeholder="请选择住所">
            <el-option label="上海" value="上海" />
            <el-option label="北京" value="北京" />
          </el-select>
        </el-col>
        <el-col :span="14">
          <el-input v-model="form.addressDetail" placeholder="请输入详细信息" />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="经营地址">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-select v-model="form.operateAddress" placeholder="请选择经营地址">
            <el-option label="上海市浦东新区" value="上海市浦东新区" />
            <el-option label="深圳市南山区" value="深圳市南山区" />
          </el-select>
        </el-col>
        <el-col :span="14">
          <el-input v-model="form.operateaddressDetail" placeholder="请输入详细信息" />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="客户性质">
      <el-radio-group v-model="form.clientNature">
        <el-radio value="his">医院</el-radio>
        <el-radio value="operateBusiness">经营企业</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="客户状态">
      <el-radio-group v-model="form.state">
        <el-radio value="0">预备</el-radio>
        <el-radio value="1">启用</el-radio>
        <el-radio value="2">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="备注信息">
      <el-input v-model="form.remark" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交表单</el-button>
      <el-button @click="resetForm">重置表单</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import { ElMessage, spaceItemProps } from 'element-plus';
import { getEditCustomerInfo ,insertCustomerInfo,updateCustomerInfo} from './customer.js';
const form = ref({
    id : 'CUST027',
    clientName : '',
    legalPerson : '',
    businessOwner : '',
    qualityManager : '',
    orImport : '',
    address : '',
    addressDetail : '',
    operateAddress : '',
    operateaddressDetail : '1',
    clientNature : '',
    state : '',    
    createTime : '',
    updateTime : '',
    isDelete : '',
    createUser : '',
    updateUser : ''
});


//接收状态值
const route = useRoute();
const viewState = ref('');
const editData = ref({
  id: ''
});

onMounted(async () => {

  if (route.query.viewState) {
        editData.value = {
    id: route.query.id ? String(route.query.id) : ''
  };
      viewState.value = route.query.viewState;
            if(viewState.value == 'update'){
  const response = await getEditCustomerInfo(editData.value.id);
  console.log('获取到的客户信息:', response.data);
  Object.assign(form.value, response.data);
      }else if(viewState.value == 'view'){
          const response = await getEditCustomerInfo(editData.value.id);
  console.log('获取到的客户信息:', response.data);
  Object.assign(form.value, response.data);
      }
    }
  console.log(viewState.value); 
});

// 重置表单
const resetForm = () => {
  const emptyForm = {
    id : '',
    clientName : '',
    legalPerson : '',
    businessOwner : '',
    qualityManager : '',
    orImport : '',
    address : '',
    addressDetail : '',
    operateAddress : '',
    operateaddressDetail : '',
    clientNature : '',
    state : '',    
    createTime : '',
    updateTime : '',
    isDelete : '',
    createUser : '',
    updateUser : ''
  };
  form.value = { ...emptyForm };
  ElMessage.info('表单已重置');
  console.log('重置');
};


//提交表单
const onSubmit = async () => {
    //请求后端新增接口
    if (viewState.value == 'create'){
      console.log(viewState);

      const response = await insertCustomerInfo(form.value);
    
    if (response.data) {
      ElMessage.success('客户信息更新成功');
      console.log('更新后的数据:', response.data);
      
      const newData = await getEditCustomerInfo(form.value.id);
      form.value = newData.data;
    } else {
      ElMessage.error(response.message || '更新失败');
    }
      
    //请求后端修改接口
    }else if(viewState.value == 'update'){
    const response = await updateCustomerInfo(form.value);
    
    if (response.data) {
      ElMessage.success('客户信息更新成功');
      console.log('更新后的数据:', response.data);
      
      const newData = await getEditCustomerInfo(form.value.id);
      form.value = newData.data;
      //originalFormData.value = JSON.parse(JSON.stringify(newData.data));
    } else {
      ElMessage.error(response.message || '更新失败');
    }
    }

};

</script>


<style scoped>

</style>